<template>
  <div>
    <Backtotop></Backtotop>
    <el-row class="center_x mt_5 mb_5 " :gutter="24">
      <el-col :span="18">
        <MyDivider bck="white">
          <div class="flex_y align_item_center">
            <span class="home_divider_font">{{ titleCN }}</span
            ><br />
            <span class="home_divider_font">{{ titleEn }}</span>
          </div>
        </MyDivider>
      </el-col>
    </el-row>
    <el-row class="center_x mt_5">
      <div class="itemwraper">
        <div style="width:200px;" class="childnav">
          <el-menu
            router
            active-text-color="#c54daa"
            :default-active="activeIndex"
          >
            <el-menu-item
              v-for="item in menueItems"
              :key="item.index"
              :index="item.index"
              :route="item.router"
              ><span style="font-size: 17px;">{{
                item.name
              }}</span></el-menu-item
            >
          </el-menu>
        </div>
        <div style="width:1100px;">
          <router-view
            style="min-height:800px; margin-bottom:100px;"
          ></router-view>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import MyDivider from '../divider/MyDivider.vue'
import Backtotop from '../../components/backtotop/Backtotop.vue'

export default {
  props: {
    titleCN: String,
    titleEn: String,
    menueItems: Array
  },
  data() {
    return {
      //   menueItems: [
      //     { index: "1", name: "实验目的", router: { name: "purpose" } },
      //     { index: "2", name: "实验原理", router: { name: "theory" } },
      //     { index: "3", name: "实验方法", router: { name: "method" } },
      //     { index: "4", name: "实验特色", router: { name: "sepecial" } },
      //     { index: "5", name: "实验演示", router: { name: "example" } },
      //     { index: "6", name: "在线实验操作指南", router: { name: "guide" } },
      //     { index: "7", name: "平台与项目团队", router: { name: "platForm" } }
      //   ],
      activeIndex: '1'
    }
  },
  components: {
    MyDivider,
    Backtotop
  },
  mounted() {
    this.$router.push(this.menueItems[0].router)
  }
}
</script>

<style>
.itemwraper {
  position: relative;
  display: flex;
}
.childnav {
  position: absolute;
  top: 0;
  left: -210px;
}
</style>
